<template>
  <div>
    <el-tree :data="data" :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            新增
          </el-button>
          <el-button
            style="color: red;"
            type="text"
            size="mini"
            @click="() => remove(node)">
            删除
          </el-button>
        </span>
      </span>
    
    </el-tree>
    
  </div>
</template>

<script>
export default {
  components: {

  },
  data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  activated () {
    this.$http.get(this.$http.adornUrl('/product/category/tree')).then(({data: data}) => {
      this.data = data.data
    }).catch(err => {
      console.log(err);
    })
  },
  methods: {
    append(data) {
      console.log(data);
      this.$http.post(this.$http.adornUrl('/product/category/save'), {name: '测试', catLevel: 1, parentCid: 2}).then(res => {
      console.log(res);
     })
    },
    remove(node) {
     this.$http({
      url: this.$http.adornUrl('/product/category/delete'),
      data: [node.data.catId],
      method: "post"
     }).then(res => {
      console.log(res);
     })
    }
  }
}
</script>

<style scoped>

</style>